<template>
  <div class="user-management">
    <h2>用户管理</h2>
    <a-row :gutter="16" class="mb-4">
      <a-col :xs="24" :sm="12" :md="8" :lg="6">
        <a-input-search
            v-model:value="searchValue"
            placeholder="搜索用户"
            @search="onSearch"
            class="w-full"
        />
      </a-col>
      <a-col :xs="24" :sm="12" :md="8" :lg="6" class="mt-2 sm:mt-0">
        <a-button type="primary" @click="showModal" class="w-full">
          <PlusOutlined/>
          添加新用户
        </a-button>
      </a-col>
    </a-row>
    <a-table
        :columns="columns"
        :data-source="data"
        :pagination="pagination"
        class="bg-white rounded-lg shadow-md"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-space>
            <a @click="editUser(record)">编辑</a>
            <a-popconfirm
                title="确定要删除这个用户吗？"
                ok-text="是"
                cancel-text="否"
                @confirm="deleteUser(record.key)"
            >
              <a>删除</a>
            </a-popconfirm>
          </a-space>
        </template>
      </template>
    </a-table>
    <a-modal
        v-model:visible="modalVisible"
        :title="modalTitle"
        @ok="handleOk"
        class="user-modal"
    >
      <a-form :model="formState" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
        <a-form-item label="用户名">
          <a-input v-model:value="formState.username"/>
        </a-form-item>
        <a-form-item label="邮箱">
          <a-input v-model:value="formState.email"/>
        </a-form-item>
        <a-form-item label="角色">
          <a-select v-model:value="formState.role">
            <a-select-option value="admin">管理员</a-select-option>
            <a-select-option value="user">普通用户</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from 'vue';
import {PlusOutlined} from '@ant-design/icons-vue';
import {message} from "ant-design-vue";
import {useAdminStore} from "@/stores/index.js";

const adminStore = useAdminStore();
const {getUserInfo} = adminStore;

const searchValue = ref('');
const modalVisible = ref(false);
const modalTitle = ref('添加新用户');
const formState = reactive({
  username: '',
  email: '',
  role: 'user'
});

const columns = [
  {
    title: '用户名',
    dataIndex: 'username',
    key: 'username',
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    key: 'email',
  },
  {
    title: '角色',
    dataIndex: 'role',
    key: 'role',
  },
  {
    title: '操作',
    key: 'action',
  },
];

const data = ref([
  {
    key: '1',
    username: 'John Brown',
    email: 'john@example.com',
    role: '管理员',
  },
  {
    key: '2',
    username: 'Jim Green',
    email: 'jim@example.com',
    role: '普通用户',
  },
]);

const pagination = {
  total: computed(() => data.value.length),
  current: 1,
  pageSize: 10,
};

const onSearch = (value) => {
  console.log('搜索:', value);
};

const showModal = () => {
  modalTitle.value = '添加新用户';
  modalVisible.value = true;
};

const handleOk = () => {
  console.log('表单提交:', formState);
  modalVisible.value = false;
};

const editUser = (record) => {
  modalTitle.value = '编辑用户';
  formState.username = record.username;
  formState.email = record.email;
  formState.role = record.role === '管理员' ? 'admin' : 'user';
  modalVisible.value = true;
};

const deleteUser = (key) => {
  data.value = data.value.filter(item => item.key !== key);
};

onMounted(async () => {
  try {
    const success = await getUserInfo();
    if (success) {

    }
  } catch (err) {
    message.error(err || "获取失败，请刷新重试");
  }
})
</script>

<style scoped>
.user-management {
  padding: 24px;
}

.mb-4 {
  margin-bottom: 16px;
}

.user-modal :deep(.ant-modal-content) {
  border-radius: 8px;
}

.user-modal :deep(.ant-modal-header) {
  border-radius: 8px 8px 0 0;
}
</style>

